<template>
	<el-container>
		<el-header style="font-size: 16px;font-weight: 600">系统轮播图设置</el-header>
		<el-main class="nopadding">
			<el-main>
				<el-form>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="是否开启" label-width="150px">
								<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">是否开桌面的系统轮播图，些设置为系统全局设置，用户不可自定义。</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="是否自动切换" label-width="150px">
								<el-switch v-model="form.autoplay" active-value="1" inactive-value="0"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">系统是否自动切换播放功能。</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="轮播图高度" label-width="150px">
								<el-input-number v-model="form.height" min="150"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">注：推荐高度为150px~250px之间</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="起始激活页" label-width="150px">
								<el-input-number v-model="form.initialIndex" min="1"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">设置默认初始展示页！务必小于当前设置页数！</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="自动播放间隔" label-width="150px">
								<el-input-number v-model="form.autoInterval" min="3000"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">系统自动换页时间间隔，单位：毫秒，推荐5000！</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="指示器的位置" label-width="150px">
								<el-select v-model="form.indicatorPosition">
									<el-option value="">内部</el-option>
									<el-option value="node">无</el-option>
									<el-option value="outside">外部</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">切换指示器的具体位置，默认为内部。</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="走马灯的类型" label-width="150px">
								<el-select v-model="form.type">
									<el-option value="">常规</el-option>
									<el-option value="card">卡片</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">图片展示方式，默认为常规。</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="是否循环显示" label-width="150px">
								<el-switch v-model="form.isLoop" active-value="1" inactive-value="0"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item>
								<span style="color: red;">自动循环切换展示图片。</span>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<sc-form-table v-model="itemContentList" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
							<el-table-column prop="time" label="Banner图" width="180">
								<template #default="scope">
									<sc-upload style="height: auto !important;"
										v-model="scope.row.image"
										:apiObj="apiObj"
										title="请上传合适比例的图片"
										:limit="1"
										fit="contain"
									></sc-upload>
								</template>
							</el-table-column>
							<el-table-column prop="val" label="字体大小" width="180">
								<template #default="scope">
									<el-input-number v-model="scope.row.fontSize"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column prop="type" label="标语" min-width="300">
								<template #default="scope">
									<el-input v-model="scope.row.slogan" placeholder="请输入标语"></el-input>
								</template>
							</el-table-column>
							<el-table-column prop="open" label="字体颜色" width="180" align="center">
								<template #default="scope">
									<el-color-picker v-model="scope.row.color"></el-color-picker>
								</template>
							</el-table-column>
						</sc-form-table>
					</el-row>
				</el-form>
			</el-main>
		</el-main>
		<el-footer class="footer">
			<el-button type="primary" @click="setSysBannerConfig">设置</el-button>
		</el-footer>
	</el-container>
</template>

<script>
export default {
	name: 'Banner Setting config',
	data() {
		return {
			apiObj:this.$API.file.uploadSysBanner,
			addTemplate: {
				image: '',
				slogan: '',
				fontSize: 30,
				color: '#FFFFFF'
			},
			itemContentList: [],
			form: {
				configId: "",
				status: "1",
				height: 150,
				initialIndex: 1,
				autoInterval: 3000,
				autoplay: "1",
				indicatorPosition:"",
				type:"",
				isLoop:"1",
				itemContent: ""
			},
		}
	},
	mounted() {
		this.getSysBannerConfig();
	},
	methods: {
		async setSysBannerConfig() {
			this.form.itemContent = JSON.stringify(this.itemContentList);
			let res = await this.$API.system.sysBannerConfig.updateSysBannerConfig.post(this.form);
			if (res.code === 200) {
				this.$message.success(res.message)
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getSysBannerConfig() {
			let res = await this.$API.system.sysBannerConfig.getSysBannerConfig.get();
			if (res.code === 200) {
				if(res.data!=null)
				{
					this.form = res.data;
					this.itemContentList = JSON.parse(res.data.itemContent);
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>

<style scoped>
.footer {
	text-align: center;
}
</style>
